<template>
  <div id="container" ref="container"></div>
</template>
<script>
export default {
  name: 'DemoPlayer',
  props: {
    videoUrl: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      jessibuca: null,
      version: '',
      wasm: false,
      vc: 'ff',
      playing: false,
      quieting: true,
      loaded: false, // mute
      showOperateBtns: false,
      showBandwidth: false,
      err: '',
      speed: 0,
      performance: '',
      volume: 1,
      rotate: 0,
      useWCS: false,
      useMSE: true,
      useOffscreen: false,
      recording: false,
      recordType: 'webm',
      scale: 0
    }
  },
  mounted() {
    this.create()
    window.onerror = (msg) => (this.err = msg)
  },
  unmounted() {
    this.jessibuca.destroy()
  },
  methods: {
    create(options) {
      options = options || {}
      this.jessibuca = new window.Jessibuca(
        Object.assign(
          {
            container: this.$refs.container,
            videoBuffer: 0.2, // Number(this.$refs.buffer.value), // 缓存时长
            isResize: false,
            useWCS: this.useWCS,
            useMSE: this.useMSE,
            text: '',
            // background: "bg.jpg",
            loadingText: '疯狂加载中...',
            // hasAudio:false,
            debug: true,
            supportDblclickFullscreen: true,
            showBandwidth: this.showBandwidth, // 显示网速
            operateBtns: {
              fullscreen: this.showOperateBtns,
              screenshot: this.showOperateBtns,
              play: this.showOperateBtns,
              audio: this.showOperateBtns
            },
            vod: this.vod,
            forceNoOffscreen: !this.useOffscreen,
            isNotMute: true,
            timeout: 10
          },
          options
        )
      )
      var _this = this
      this.jessibuca.on('pause', function () {
        console.log('on pause')
        _this.playing = false
      })
      this.jessibuca.on('play', function () {
        console.log('on play')
        _this.playing = true
      })
      this.jessibuca.on('mute', function (msg) {
        console.log('on mute', msg)
        _this.quieting = msg
      })
      this.jessibuca.on('error', function (error) {
        console.log('error', error)
      })
      this.jessibuca.on('performance', function (performance) {
        var show = '卡顿'
        if (performance === 2) {
          show = '非常流畅'
        } else if (performance === 1) {
          show = '流畅'
        }
        _this.performance = show
      })
      this.jessibuca.on('play', () => {
        this.playing = true
        this.loaded = true
        this.quieting = this.jessibuca.isMute()
      })
    },
    play(videoUrl) {
      if (videoUrl) {
        this.jessibuca.play(videoUrl)
      } else {
        // this.$message.error('播放地址出错')
        this.destroy()
      }
    },
    mute() {
      this.jessibuca.mute()
    },
    cancelMute() {
      this.jessibuca.cancelMute()
    },
    pause() {
      this.jessibuca.pause()
      this.playing = false
      this.err = ''
      this.performance = ''
    },
    destroy() {
      if (this.jessibuca) {
        this.jessibuca.destroy()
      }
      this.create()
      this.playing = false
      this.loaded = false
      this.performance = ''
    }
  }
}
</script>
<style>
#container {
  background: rgba(13, 14, 27, 0.7);
  width: 100%;
  height: 100%;
}
</style>
